<!-- 单表配置项（折线图） -->
<template>
  <el-form :inline="true" :model="form">
    <el-button @click="addSeries">+</el-button>
    <div class="series-item" v-for="(item, index) of form!.series" :key="item.id">
      <el-form-item>
        <el-button :icon="Delete" type="danger" @click="removeSeries(item.id)"></el-button>
      </el-form-item>
      <el-form-item label="折线名称">
        <el-input v-model="item.name" />
      </el-form-item>
      <el-form-item label="折线颜色">
        <el-color-picker v-model="item.itemStyle!.color" />
      </el-form-item>
      <el-form-item label="平滑曲线">
        <el-switch v-model="item.smooth" />
      </el-form-item>

      <el-divider />

      <el-form-item label="阴影区域透明度">
        <el-slider v-model="item.areaStyle!.opacity" :min="0" :max="1" :step="0.1" :show-tooltip="true" />
      </el-form-item>
      <el-form-item label="阴影区域颜色" v-if="item.areaStyle">
        <el-color-picker v-model="item.areaStyle!.color" />
      </el-form-item>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { chartStore } from '../../store/index'
import {
  Delete,
} from '@element-plus/icons-vue'

import { Series } from '../../types/EChartsCommonConfig'
import { EChartsConfigForm } from '../../types/EChartsConfigForm'
import { chartDefaultConfig } from '../../types/EChartsTypes'

const store: any = chartStore()
let form: EChartsConfigForm = store.form

const emits = defineEmits(['addSeries', 'removeSeries', 'changeProps'])

// 添加图表单独配置项
function addSeries() {
  const seriesItem: Series = Object.assign({ id: new Date().getTime() }, chartDefaultConfig().LINE().series[0])
  emits('addSeries', seriesItem)
}

// 移除图表单独配置项
function removeSeries(id: number) {
  emits('removeSeries', id)
}
</script>

<style lang="less" scoped>
.series-item {
  background-color: #f6f6f6;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px 20px 0 20px;
  margin: 10px 0;
}

.el-slider {
  // 配置栏宽度：400px，故该控件取值小于 400px 即可
  width: 200px;
  margin-left: 10px;
}
</style>
